<template>
    <div class="my_mine">
        <div class="my_top">
            <div class="box1">
                <div class="top">
                    <img src="https://img1.baidu.com/it/u=3387963355,1502469564&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500"
                        alt="">
                </div>
                <div class="text1">立即登录</div>
            </div>
             <div class="box2">
                <div v-for="item in data1" :key="item.id" @click="musicData(item.id)" >
                    <div class="text2">{{ item.text }}</div>
                </div>
             </div>
        </div>
        <div class="my_bottom">
            <div class="bottom1">
                <div>音乐</div>
                <div>博客</div>
                <div>动态</div>
            </div>
            <div class="bottom2">
                <div v-for="item in data2" :key="item.id" @click="musicData2(item.id)">
                    <img :src="item.imgUrl" alt="" width="20%" height="20%">
                    <div class="text3">{{ item.text }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router';

const data1 = ref([
    { id: 1,  text: "最近" },
    { id: 2, text: "本地" },
    { id: 3, text: "云盘" },
    { id: 4, text: "已购" },
])

//跳转到导航页面
const musicData = (id) => {
    console.log('跳转到页面', id);
}

const data2 = ref([
    { id: 1, text: "我喜欢的音乐" ,imgUrl:'https://img0.baidu.com/it/u=3814781279,3367139407&fm=253&fmt=auto&app=138&f=PNG?w=320&h=320'},
    { id: 2, text: "新建歌单" ,imgUrl:'https://img2.baidu.com/it/u=563222191,2892858223&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=462' },
    { id: 3, text: "导入外部歌单" ,imgUrl:'https://img2.baidu.com/it/u=3389263536,3935267908&fm=253&fmt=auto&app=138&f=PNG?w=320&h=320' },
])

//跳转到导航页面
const musicData2 = (id) => {
    console.log('跳转到页面', id);
}
</script>
<style scoped>
.my_mine {
    margin-top: 10px;
    padding: 0 10px;
    height: calc(100vh - 110px);
    overflow-y: scroll;
}

.my_top {
    background-color: rgb(110, 13, 13);
    height: 40%;

}

.box1 {

    text-align: center;
    position: relative;
    top: 50px;
}

.box1 img {

    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.text1 {
    padding-top: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
}

.box2 {
    text-align: center;
    display: flex;
    width: 180px;
    justify-content: space-between;
    padding: 70px 0 0 80px;
    font-size: 14px;
}

.text2 {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    background-color: floralwhite;
}
.my_bottom {
    background-color: rgba(208, 202, 202, 0.165);
    border-radius: 10px;
    height: 60%;
}

.my_bottom .bottom1 {
    display: flex;
    justify-content: space-around;
    font-size: 20px;
    font-weight: bolder;
    padding: 10px 0px 10px 0;
}
.text3{
    position: relative;
    top: -50px;
    left: 100px;
    

}
</style>